<template>
  <div>
    <div>【数据传递信息】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineProps, onMounted, watch } from "vue";
import * as echarts from "echarts";
import type { EChartsOption, BarSeriesOption, EChartsType } from "echarts"; // 导入类型
import type { Relations, Relation } from "@/api/types";

const props = defineProps<{
  data: Relations;
}>();
console.log("关联关系", props.data);

//1. 根据DOM 实例，通过echarts.init方法，生成echarts实例
const target = ref<HTMLElement | null>(null);
let mChart: EChartsType;
onMounted(() => {
  mChart = echarts.init(target.value as HTMLElement);
  renderChart();
});

//2. 构建 options 配置对象，整个 echarts 的样式，皆有该对象决定

const renderChart = () => {
  if (props.data.relations.length === 0) return;
  const options: EChartsOption = {
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: {
      show: false,
      type: "value",
    },
    series: [
      {
        type: "graph",
        layout: "none",
        coordinateSystem: "cartesian2d",
        symbolSize: 26, //默认圆圈的大小
        z: 3,
        edgeLabel: {
          show: true,
          color: "#fff",
          fontSize: 14, //速度样式的大小
          formatter: function (params: any) {
            return params.data.speed;
          },
        },
        label: {
          show: true,
          color: "#5E5E5E",
          position: "bottom",
          fontSize: 10, //默认标签样式的大小
        },
        edgeSymbol: ["none", "arrow"],
        edgeSymbolSize: 8, //箭头大小
        data: props.data.relations.map((item: Relation) => {
          if (item.id !== 0) {
            return {
              name: item.name,
              category: 0,
              active: true,
              speed: `${item.speed}kb/s`,
              value: item.value,
              symbolSize: 30, //圆圈大小
              label: {
                fontSize: 12, //四周标签大小
              },
            };
          } else {
            return {
              name: item.name,
              value: item.value,
              symbolSize: 100,
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#157eff",
                    },
                    {
                      offset: 1,
                      color: "#35c2ff",
                    },
                  ],
                },
              },
              label: {
                fontSize: 14, //中间的标签大小
              },
            };
          }
        }),
        links: props.data.relations.map((item: Relation, index: number) => ({
          source: item.source,
          target: item.target,
          speed: `${item.speed}kb/s`,
          lineStyle: {
            color: "#12b5d0",
            curveness: 0.2,
          },
          label: {
            show: true,
            position: "middle",
            offset: [10, 0],
          },
        })),
      },
      {
        type: "lines",
        coordinateSystem: "cartesian2d",
        z: 1,
        effect: {
          show: true,
          smooth: false,
          trailLength: 0,
          symbol: "arrow",
          color: "rgba(55,155,255,0.6)",
          symbolSize: 12,
        },
        lineStyle: {
          curveness: 0.2,
        },
        data: [
          // [{coord:[0,300]}, {coord:[50,200]}],
          // [{coord:[0,100]}, {coord:[50,200]}],
          // [{coord:[50,200]},{coord:[100,100]}],
          // [{coord:[50,200]},{coord:[100,300]}],
          {
            coords: [
              [0, 300],
              [50, 200],
            ],
          },
          {
            coords: [
              [0, 100],
              [50, 200],
            ],
          },
          {
            coords: [
              [50, 200],
              [100, 100],
            ],
          },
          {
            coords: [
              [50, 200],
              [100, 300],
            ],
          },
        ],
      },
    ],
  };
  //3 .最后通过 实例.set0ption 方法，设置配置对象
  mChart.setOption(options);
};

watch(() => props.data, renderChart);
</script>
<style scoped lang="scss"></style>
